<template>
      <h2 style="text-align: center;">用户还款</h2>
      <table>
          <tr>
            <td>借款款项名称</td>
            <td>{{info.B_Name}}</td>
          </tr>
          <tr>
            <td>最高借款金额</td>
            <td>{{info.BM_Money}}CNY</td>
          </tr>
          <tr>
            <td>利息</td>
            <td>{{info.BMI_Interest}}</td>
          </tr>
          <tr>
            <td>借款金额</td>
            <td>{{info.UBM_Money}}CNY</td>
          </tr>
          <tr>
            <td>利息</td>
            <td>{{(info.UBM_Money*info.BMI_Interest/100).toFixed(2)}}CNY</td>
          </tr>
          <tr>
            <td>应还款</td>
            <td>{{(info.UBM_Money+info.UBM_Money*info.BMI_Interest/100).toFixed(2)}}CNY</td>
          </tr>
          <tr>
            <td>还款金额</td>
            <td><input type="text" v-model="UBMR_Money"/></td>
          </tr>
          <tr>
            <td colspan="2" style="text-align: center;">
            <input type="button" @click="SaveData" value="还款"/>
            </td>
          </tr>
      </table>
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue';

import {useRoute,useRouter} from 'vue-router'

const router =  useRouter();
import axios from 'axios';

const route = useRoute();

alert(route.params.UBId)

const info = ref({
    B_Name:"",
    BM_Money:0,
    BMI_Interest:0,
    UBM_Money:0,
})

onMounted(()=>{
    LoadData();
})

const LoadData =()=>{
     axios({
        url:"https://localhost:44337/api/Borrow/GetUserBorrowMoneyInfo",
        method:"get",
        params:{
            UBMId:route.params.UBId
        }    
     }).then(res=>{
        console.log(res.data)
        info.value=res.data[0]
     }).catch(err=>{
        console.log(err)
     })
}

//创建还款金额响应式数据
const UBMR_Money = ref("");
//完成用户还款功能
const SaveData =()=>{
    //判断借款金额是否大于0
    if(Number(UBMR_Money.value)<=0){
        alert("还款金额必须大于0")
        return;
    }
    //判断还款金额是否大于应还款金额
    if(Number(UBMR_Money.value)>Number(info.value.UBM_Money+info.value.UBM_Money*info.value.BMI_Interest/100)){
        alert("还款金额不能大于应还款金额")
        return;
    }
    //完成用户还款功能
    axios({
        url:"https://localhost:44337/api/Borrow/AddUserBorrowReplyInfo",
        method:"post",
        data:{
            UB_Id:route.params.UBId,
            UBMR_Money:UBMR_Money.value,
        }    
     }).then(res=>{
         if(res.data>0){
            alert("还款成功")
            router.push("/ShowUserBorrowMoneyInfo")
         }else{
            alert("还款失败")
         }
         
     }).catch(err=>{
        console.log(err)
     })
}
</script>